<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
    <script src="{% static '/js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static '/js/bootstrap.min.js' %}"></script>
    <title>生成消费单据</title>
</head>
<style>
    div{
        width: 100%;
        text-align: center;
    }
</style>
    <script>
    $(function(){
        var table = document.getElementById("mytable");
        var cost = 0;
        for ( var i = 1; i < table.rows.length-1; ++ i ) {
            cost +=  parseInt(table.rows[i].cells[1].innerHTML) ;
        }
        table.rows[i].cells[1].innerHTML = cost;

    })

        function myFunction(){
        var cost = document.getElementById("total").innerText;
            $.ajax({
                url: "/setbill/",
                type: 'post',
                data: {
                    "cli": {{ cli.id }},
                    "cliallcost":cost,
                    "csrfmiddlewaretoken":"{{ csrf_token }}",
                },
                success: function (data) {
                    alert(data['resule'])
                    }
                });
        }

</script>
<body>
<h3 align="center">{{ cli.name }}的点餐单据</h3>
<div>
    <table  id="mytable" class="table table-striped">
    <tr>
        <td>菜品</td>
        <td>价格</td>
        <td>餐桌号</td>
    </tr>

    {% for message in order_message %}
        {% if message.done %}
            <tr>
                <td>{{ message.dishesid.name }}</td>
                <td>{{ message.dishesid.price }}</td>
                <td>{{ message.tableid.id }}</td>
            </tr>
        {% endif %}
    {% endfor %}
    <tr>
        <td>合计</td>
        <td id ="total"></td>
    </tr>
</table>
    <button onclick="myFunction()" class="btn btn-default">结账</button>
<a href="/reception/"><span>返回前台</span></a>
</div>

</body>
</html>